<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习5：DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
					<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
					<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
					<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
					<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
					<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" checked="checked"/>葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
function show(title) {
    let currentMenu = document.getElementById(title);
    let currentStatus = currentMenu.style.display;
    if (currentStatus == "") {
        currentMenu.style.display = "block";
        closeOtherMenus(title);
    } else {
        currentMenu.style.display = "";
    }
}

//关闭其他菜单项
function closeOtherMenus(currentTitle) {
    let menus = document.querySelectorAll("ul[id^='menu']");
    menus.forEach(function(menu) {
        let title = menu.id;
        if (title !== currentTitle) {
            menu.style.display = "";
        }
    });
}

			//获取原始图片路径
function showImg() {
    let imgSrc = document.getElementById("fruit").src;
    document.getElementById("msg1").innerText = "图片路径：" + imgSrc;
}

//获取喜欢的水果
function getFruit() {
    let checkboxes = document.getElementsByName("enjoy");
    let selectedFruits = [];
    checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
            selectedFruits.push(checkbox.value);
        }
    });
    document.getElementById("msg2").innerText = "我喜欢的水果：" + selectedFruits.join(", ");
}

//创建图片
function createImg() {
    let newImg = document.createElement("img");
    newImg.src = "img/grape.jpg";
    newImg.alt = "新水果";
    document.getElementById("msg3").appendChild(newImg);
}

//克隆图片
function cloneImg() {
    let originalImg = document.getElementById("fruit");
    let clonedImg = originalImg.cloneNode(true);
    document.getElementById("msg4").appendChild(clonedImg);
}

//改变图片
function changeImg() {
    document.getElementById("fruit").src = "img/grape.jpg";
}

//删除图片
function removeImg() {
    let imgContainer = document.getElementById("msg1");
    let imgToRemove = document.getElementById("fruit");
    imgContainer.removeChild(imgToRemove);
}

//操作样式1
function changeCss1(){
    document.getElementById("fruit").style.border = "2px solid red";
}

//操作样式2
function changeCss2(){
    let fieldsets = document.getElementsByTagName("fieldset");
    for (let i = 0; i < fieldsets.length; i++) {
        fieldsets[i].style.backgroundColor = "lightblue";
    }
}
		</script>
	</body>
</html>
